<template>
  <page-header-wrapper :title="pageTitle">
    <a-card :bordered="false">
      <s-table
        style="margin-top: 24px"
        row-key="outOrderNo"
        :columns="goodsColumns"
        :data="loadGoodsData"
      >
        <span slot="handle" slot-scope="text,record">
          <template>
            <a @click="onHandlerId(record)">
              <!-- <a-icon type="edit" /> -->
              <div>查看</div>
            </a>
          </template>
        </span>
      </s-table>
    </a-card>

  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import PopInfo from './components/PopInfo'
import { listPayRecord, getPayRecordDetail } from '@/api/common'

const invoiceStatusArray = [
  {
    value: undefined,
    status: false,
    test: '不限'
  },
  {
    value: '1',
    status: false,
    test: '待支付'
  },
  {
    value: '2',
    status: false,
    test: '支付中断'
  },
  {
    value: '3',
    status: false,
    test: '支付异常'
  },
  {
    value: '4',
    status: false,
    test: '支付成功'
  },
  {
    value: '5',
    status: false,
    test: '支付失败'
  }
]
export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  components: {
    STable
  },
  data () {
    return {
      // 查询参数
      queryParam: {},
      // 交易状态
      invoiceStatusArray,
      reqData: {
        invoiceStatus: null // 开票请求状态
      },
      goodsColumns: [
        {
          title: '订单编号',
          dataIndex: 'leapmotorOrderId',
          key: 'leapmotorOrderId'
        },
        {
          title: '商户号',
          dataIndex: 'merchantId',
          key: 'merchantId'
        },
        {
          title: 'POS终端',
          dataIndex: 'terminalId',
          key: 'terminalId'
        },
        {
          title: '支付编号',
          dataIndex: 'outOrderNo',
          key: 'outOrderNo'
        },
        {
          title: '实际交易金额（元）',
          dataIndex: 'transAmount',
          key: 'transAmount'
        },
        {
          title: '交易时间',
          dataIndex: 'transTime',
          key: 'transTime'
        },
        {
          title: '流水号',
          dataIndex: 'voucherNo',
          key: 'voucherNo'
        },
        {
          title: '系统参考号',
          dataIndex: 'referenceNo',
          key: 'referenceNo'
        },
        {
          title: '系统返回码',
          dataIndex: 'responseCode',
          key: 'responseCode'
        },
        {
          title: '支付状态',
          dataIndex: 'status',
          key: 'status'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'handle' }
        }
      ],
      pageTitle: '',
      // 加载数据方法 必须为 Promise 对象
      loadGoodsData: () => {
        return listPayRecord({
          leapmotorOrderId: this.id
        }).then(res => {
          if (res.status === 'S000') {
            return ({
              data: res.data,
              pageSize: 10,
              pageNo: 1,
              totalPage: 1,
              totalCount: res.data.length
            })
          } else {
            this.$notification.error({
              message: '错误',
              description: res.msg
            })
          }
        })
      }
    }
  },
  created () {
    this.pageTitle = `交易记录管理(订单编号:${this.id})`
  },
  methods: {
    onHandlerId (record) {
      getPayRecordDetail({
        payRecordId: record.payRecordId
      }).then(res => {
        if (res.status === 'S000') {
          this.dialogFun(res.data)
        }
        console.log(res)
      })
    },
    dialogFun (data) {
      this.$dialog(PopInfo,
        // component props
        {
          record: data
        },
        // modal props
        {
          title: '支付详情',
          width: 900,
          okText: '55',
          centered: true,
          maskClosable: false,
          footer: null
        })
    },
    pickerChange () {
      console.log(555)
    }
  }
}
</script>
<style lang="less" scoped>

/deep/ .ant-divider-horizontal {
  margin: 6px 0;
}
</style>
